<script setup>
import { useRoute } from "vue-router";
import { ref, onMounted } from 'vue'
import { payResult } from '@/apis/payFees.js'
import { showLoadingToast, closeToast } from 'vant'

const route = useRoute()

const payresult = ref({})
const orderSn = ref('')
const isShowToast = ref(true)

async function payResultFn() {
    if (isShowToast.value) {
        showLoadingToast({
            message: '加载中...',
            forbidClick: true,
            duration: 0
        })
    }
    let attempts = 0;
    const maxAttempts = 10;
    const intervalId = setInterval(async () => {
        if (attempts >= maxAttempts) {
            closeToast();
            clearInterval(intervalId);
            return;
        }
        attempts++;
        const res = await payResult({ orderSn: orderSn.value });
        payresult.value = res.data;
        if (res.data.payState === 1) {
            closeToast();
            isShowToast.value = false
            clearInterval(intervalId);
        }
    }, 2000);
}

onMounted(() => {
    if (route.query.out_trade_no) {
        orderSn.value = route.query.out_trade_no;
        payResultFn()
    }

})
</script>

<template>
    <div class='payFeesDetails_page' v-if="!isShowToast">
        <NavBar></NavBar>
        <div class="container">
            <div class="card">
                <div class="avatar">
                    <i class="iconfont ai-icon-shouyi"></i>
                </div>
                <div class="money_box">
                    <span class="icon">￥</span>
                    <span>{{ payresult.payAmount }}</span>
                </div>
                <div class="state" v-if="payresult.payState === 1">支付成功</div>
                <div class="hr"></div>
                <div class="orderInfo">
                    <div class="title">订单信息</div>
                    <div class="info">
                        <div class="info_item">
                            <div class="label">订单号</div>
                            <div class="value">{{ payresult.orderSn }}</div>
                        </div>
                        <div class="info_item">
                            <div class="label">项目名称</div>
                            <div class="value">{{ payresult.goodsName }}</div>
                        </div>
                        <div class="info_item">
                            <div class="label">缴费金额</div>
                            <div class="value">￥{{ payresult.payAmount }}</div>
                        </div>
                        <div class="info_item">
                            <div class="label">支付时间</div>
                            <div class="value">{{ payresult.payTime }}</div>
                        </div>
                    </div>
                </div>
                <div class="orderInfo">
                    <div class="title">学生信息</div>
                    <div class="info">
                        <div class="info_item">
                            <div class="label">学生姓名</div>
                            <div class="value">{{ payresult.studentName }}</div>
                        </div>
                        <div class="info_item">
                            <div class="label">手机号码</div>
                            <div class="value">{{ payresult.telephone }}</div>
                        </div>
                        <div class="info_item">
                            <div class="label">证件号码</div>
                            <div class="value">{{ payresult.idcard }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang='scss' scoped>
.payFeesDetails_page {
    height: 100vh;
    background: linear-gradient(180deg, #E82925 0%, #E82925 18%, #F5F5F5 42%);

    .container {
        padding: 0 20px;

        .card {
            background-color: #fff;
            height: 531px;
            border-radius: 12px;
            padding: 13px 0 0;

            .avatar {
                width: 54px;
                height: 54px;
                background: #F7F7F9;
                border-radius: 50%;
                margin: 0 auto 0;
                display: flex;
                align-items: center;
                justify-content: center;

                .iconfont {
                    font-size: 29px;
                    color: #FFAB24;
                }
            }

            .money_box {
                font-size: 28px;
                color: #121212;
                margin: 13px 16px 0;
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    font-size: 16px;
                }
            }

            .state {
                font-size: 16px;
                color: #FFAB24;
                text-align: center;

                &.error {
                    color: red;
                }
            }

            .hr {
                margin-top: 25px;
                border-bottom: 1px dashed #EDEDED;

            }

            .orderInfo {
                padding: 15px 16px 20px;
                border-bottom: 1px dashed #EDEDED;

                &:last-child {
                    border-bottom: none;
                }

                .title {
                    font-size: 16px;
                    color: #121212;
                    font-weight: bold;
                }

                .info {
                    margin-top: 13px;

                    .info_item {
                        display: flex;
                        align-items: center;
                        gap: 30px;
                        margin-bottom: 18px;

                        .label {
                            width: 60px;
                            font-size: 14px;
                            color: #565656;
                        }
                    }
                }
            }
        }
    }
}
</style>